<template>
  <div>
    <div id="mapContainer"></div>
    <div v-if="selectedMarker" class="infoWindow">
      <div class="infoWindowContent">
        <div class="infoWindowHeader">
          <img :src="selectedMarker.icon" alt="Icon" class="icon" />
          <h3>{{ selectedMarker.name }}</h3>
        </div>
        <div class="infoWindowDetails">
          <p>联系电话：{{ selectedMarker.phone }}</p>
          <p>{{ selectedMarker.address }}</p>
          <p>老人总数：{{ selectedMarker.elderlyCount }}</p>
          <p>服务人员：{{ selectedMarker.staffCount }}</p>
          <p>剩余床位：{{ selectedMarker.availableBeds }}</p>
        </div>
        <div class="infoWindowImages">
          <!-- <img v-for="image in selectedMarker.images" :src="image" alt="Image" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';

export default {
  data() {
    return {
      map: null,
      markers: [
        {
          name: '养老院1',
          position: [116.397428, 39.90923],
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          phone: '0371-9556211',
          address: '上党区某某机构 管城回族区经开区经北二路116号办公楼5楼',
          elderlyCount: 100,
          staffCount: 20,
          availableBeds: 50,
          images: ['path/to/image1.png', 'path/to/image2.png'],
        },
        // 其他标记点的数据
      ],
      selectedMarker: null,
      polygon: null,
      polygonVisible: false,
    };
  },
  mounted() {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.initMap();
    });
  },
  methods: {
    initMap() {
      this.map = new AMap.Map('mapContainer', {
        zoom: 13,
        center: [116.397428, 39.90923],
        mapStyle: "amap://styles/db027b434158ae048a7cb0a5b2e1872c",
      });

      this.addMarkers();
      this.addPolygon();
    },
    addMarkers() {
      this.markers.forEach((marker) => {
        const markerObj = new AMap.Marker({
          position: marker.position,
          icon: marker.icon,
          map: this.map,
        });

        markerObj.on('click', () => {
          this.showInfoWindow(marker);
        });

        markerObj.on('mouseover', () => {
          this.showInfoWindow(marker);
        });

        markerObj.on('mouseout', () => {
          this.hideInfoWindow();
        });
      });
    },
    showInfoWindow(marker) {
      this.selectedMarker = marker;
    },
    hideInfoWindow() {
      this.selectedMarker = null;
    },
    addPolygon() {
      const polygonPath = [
        [116.397477, 39.918692],
        [116.410049, 39.918692],
        [116.410049, 39.912881],
        [116.397477, 39.912881]
      ];

      this.polygon = new AMap.Polygon({
        path: polygonPath,
        map: this.map,
        strokeColor: '#FF0000',
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.3,
        visible: this.polygonVisible,
      });

      this.polygon.on('click', () => {
        this.togglePolygon();
      });
    },
    togglePolygon() {
      this.polygonVisible = !this.polygonVisible;
      this.polygon.setMap(this.polygonVisible ? this.map : null);
    },
  },
};
</script>

<style>
#mapContainer {
  width: 100%;
  height: 400px;
}

.infoWindow {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.infoWindowContent {
  display: flex;
  flex-direction: column;
}

.infoWindowHeader {
  display: flex;
  align-items: center;
}

.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.infoWindowImages {
  display: flex;
  margin-top: 10px;
}

.infoWindowImages img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.infoWindowImages img:last-child {
  margin-right: 0;
}
</style>
